<template>
  <div class='operation-wrapper'>
    <div class="list controls-list">
      <!-- <custom-title title="运行记录"/> -->
      <div class="conditons flex">
        <custom-form :formModel="searchMap" :formItemConfig="recordFormItemConfig" />
        <el-button @click="handleSearch()" class="btn_primary ml10">查询</el-button>
      </div>
      <base-table :tableModel="recordList" :tableItemConfig="recordListConfig" stripe v-loading="recordListLoading" height="600px">
        <template v-slot:operateType="{ scope, item }">
          <dict-tag :options="dictMap.type.device_status" :value="scope.row[item.prop]" />
        </template>
      </base-table>
      <!-- 分页 -->
      <Pagination v-show="total > 0" :total="total" :page.sync="searchMap.pageNum" :limit.sync="searchMap.pageSize" small @change="toGetDeviceCommonDataList"></Pagination>
      <!-- 分页over -->
    </div>
  </div>
</template>

<script>
import { getDeviceCommonDataList, getDeviceFactorList } from '@/api/dataMonitoring'
export default {
  name: "RunningRecord",
  props: {
    value: {
      require: true
    },
    dictMap: {
      type: Object,
      default: () => { },
    },
  },
  data() {
    return {
      // 运行记录表单（查询条件）数据
      searchMap: {
        pageNum: 1,
        pageSize: 10,
        // 因子
        factorList: [],
        // 因子列表-字符串-用,分开
        factors: '',
        endTime: '',
        startTime: ''
      },
      total: 0,
      // 运行记录配置项
      recordFormItemConfig: [
        {
          label: "因子选择",
          prop: "factorList",
          span: 8,
          filedLabel: "factorName",
          filedValue: "factorCode",
          component: "BaseMultipleSelect",
          labelWidth: "100px",
          clearable: true,
          collapseTags: true,
          onChange: (e) => {
            this.searchMap.factors = this.searchMap.factorList.join(',')
          }
        },
        {
          label: "开始时间",
          prop: "startTime",
          span: 8,
          component: 'BaseDateTimePicker',
          // labelWidth: "120px",
          clearable: true,
          valueFormat: "yyyy-MM-dd hh:mm:ss",
          onChange: (e) => {
          }
        },
        {
          label: '结束时间',
          prop: 'endTime',
          span: 8,
          component: 'BaseDateTimePicker',
          // labelWidth: "120px",
          clearable: true,
          valueFormat: "yyyy-MM-dd hh:mm:ss",
          onChange: (e) => {
          }
        },
      ],
      // 运行记录列表
      recordList: [{
        createTime: "2020-11-12 00:00:00",
        operateContent: "",
        operateName: "",
      }, {
        createTime: "2020-11-12 00:00:00",
        operateContent: "",
        operateName: "",
      }, {
        createTime: "2020-11-12 00:00:00",
        operateContent: "",
        operateName: "",
      }],
      // 运行记录表格配置
      recordListConfig: [
        {
          prop: 'dataTime',
          label: '时间'
        },
        {
          prop: 'factorCode',
          label: '因子编码'
        },
        {
          prop: 'factorName',
          label: '因子名称'
        },
        {
          prop: 'factorValue',
          label: '因子值'
        }
      ],
      // recordListConfig: [
      //   {
      //     prop: 'createTime',
      //     label: '时间'
      //   },
      //   {
      //     prop: 'deviceStatus',
      //     label: '设备状态'
      //   },
      //   {
      //     prop: 'operateName',
      //     label: '设备信息'
      //   },
      // ],
      recordListLoading: false
    };
  },
  computed: {},
  watch: {
    value: {
      immediate: true,
      deep: true,
      handler(newVal) {
        this.searchMap.deviceId = newVal.deviceId
        this.toGetFactors()
        this.toGetDeviceCommonDataList()
      },
    }
  },
  methods: {
    // 获取设备监测通用监测数据
    async toGetDeviceCommonDataList() {
      this.recordListLoading = true
      let monitorData = await getDeviceCommonDataList(this.searchMap)
      if (monitorData && 200 == monitorData.code) {
        let list = monitorData.rows
        this.total = monitorData.total
        this.recordList = list
      }
      this.recordListLoading = false
    },
    // 获取设备监测因子列表
    async toGetFactors() {
      let factorRes = await getDeviceFactorList(this.searchMap.deviceId)
      if (factorRes && 200 == factorRes.code) {
        let factorList = factorRes.rows
        this.recordFormItemConfig.forEach(item => {
          if ('factorList' == item.prop) {
            this.$set(item, 'options', factorList)
            if (factorList.length) {
              this.searchMap.factors = factorList[0].factorCode
              this.searchMap.factorList = [factorList[0].factorCode]
            }
          }
        })
      }
    },
	// 查询
    handleSearch() {
      this.toGetDeviceCommonDataList()
    }

  },
  components: {},
}
</script>